<template>
  <!-- 课表设置弹窗 -->
  <el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :close-on-press-escape="false" width="1300px">
    <div class="curriculum-box">
      <div class="urriculum-item urriculum-item-header">
        <div class="chunk-box">课程名称</div>
        <div class="chunk-box">上课时间</div>
        <div class="chunk-box">角色</div>
        <div class="chunk-box">周一</div>
        <div class="chunk-box">周二</div>
        <div class="chunk-box">周三</div>
        <div class="chunk-box">周四</div>
        <div class="chunk-box">周五</div>
        <div class="chunk-box">周六 </div>
        <div class="chunk-box">周日</div>
        <div class="chunk-box" v-if="curriculumList.length > 0 && !curriculumList[0].id">操作</div>
      </div>
      <div class="urriculum-item" v-for="(item,index) in curriculumList" :key="index">
        <div class="chunk-box">
          <el-select v-model="item.courseId" placeholder="课程名称" clearable filterable style="width: 100%;" @change="(e)=>changeCourse(e,item)" @clear="(e)=>changeCourse(e,item)">
            <el-option v-for="e in courseNameList" :key="e.id" :label="e.courseName" :value="e.id" />
          </el-select>
        </div>
        <div class="chunk-box">
          <el-date-picker v-model="item.classTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="上课时间" style="width:100%;" />
        </div>
        <div class="chunk-box">
          <span>教师</span>
          <span v-if="item.courseId">学生</span>
        </div>
        <div class="chunk-box">
          <el-select v-model="item.oneDay" placeholder="教师" clearable filterable style="width: 100%;">
            <el-option v-for="e in teacherList" :key="e.id" :label="e.realName" :value="e.id" />
          </el-select>
          <el-select v-if="item.courseId" v-model="item.oneDayStu" placeholder="学生" clearable filterable multiple style="width: 100%;">
            <el-option v-for="e in studentList" :key="e.uuid" :label="e.realName" :value="e.uuid" />
          </el-select>
        </div>
        <div class="chunk-box">
          <el-select v-model="item.twoDay" placeholder="教师" clearable filterable style="width: 100%;">
            <el-option v-for="e in teacherList" :key="e.id" :label="e.realName" :value="e.id" />
          </el-select>
          <el-select v-if="item.courseId" v-model="item.twoDayStu" placeholder="学生" clearable filterable multiple style="width: 100%;">
            <el-option v-for="e in studentList" :key="e.uuid" :label="e.realName" :value="e.uuid" />
          </el-select>
        </div>
        <div class="chunk-box">
          <el-select v-model="item.threeDay" placeholder="教师" clearable filterable style="width: 100%;">
            <el-option v-for="e in teacherList" :key="e.id" :label="e.realName" :value="e.id" />
          </el-select>
          <el-select v-if="item.courseId" v-model="item.threeDayStu" placeholder="学生" clearable filterable multiple style="width: 100%;">
            <el-option v-for="e in studentList" :key="e.uuid" :label="e.realName" :value="e.uuid" />
          </el-select>
        </div>
        <div class="chunk-box">
          <el-select v-model="item.fourDay" placeholder="教师" clearable filterable style="width: 100%;">
            <el-option v-for="e in teacherList" :key="e.id" :label="e.realName" :value="e.id" />
          </el-select>
          <el-select v-if="item.courseId" v-model="item.fourDayStu" placeholder="学生" clearable filterable multiple style="width: 100%;">
            <el-option v-for="e in studentList" :key="e.uuid" :label="e.realName" :value="e.uuid" />
          </el-select>
        </div>
        <div class="chunk-box">
          <el-select v-model="item.fiveDay" placeholder="教师" clearable filterable style="width: 100%;">
            <el-option v-for="e in teacherList" :key="e.id" :label="e.realName" :value="e.id" />
          </el-select>
          <el-select v-if="item.courseId" v-model="item.fiveDayStu" placeholder="学生" clearable filterable multiple style="width: 100%;">
            <el-option v-for="e in studentList" :key="e.uuid" :label="e.realName" :value="e.uuid" />
          </el-select>
        </div>
        <div class="chunk-box">
          <el-select v-model="item.sixDay" placeholder="教师" clearable filterable style="width: 100%;">
            <el-option v-for="e in teacherList" :key="e.id" :label="e.realName" :value="e.id" />
          </el-select>
          <el-select v-if="item.courseId" v-model="item.sixDayStu" placeholder="学生" clearable filterable multiple style="width: 100%;">
            <el-option v-for="e in studentList" :key="e.uuid" :label="e.realName" :value="e.uuid" />
          </el-select>
        </div>
        <div class="chunk-box">
          <el-select v-model="item.sevenDay" placeholder="教师" clearable filterable style="width: 100%;">
            <el-option v-for="e in teacherList" :key="e.id" :label="e.realName" :value="e.id" />
          </el-select>
          <el-select v-if="item.courseId" v-model="item.sevenDayStu" placeholder="学生" clearable filterable multiple style="width: 100%;">
            <el-option v-for="e in studentList" :key="e.uuid" :label="e.realName" :value="e.uuid" />
          </el-select>
        </div>
        <div class="chunk-box operat-box" v-if="!item.id">
          <div class="operat-icon" @click="clickAdd(item,index)">
            <el-icon color="#83858a">
              <Plus />
            </el-icon>
          </div>
          <div class="operat-icon" v-if="curriculumList.length > 1" @click="clickDel(item,index)">
            <el-icon color="#83858a">
              <Minus />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
    <template v-slot:footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, nextTick } from "vue";
import baseService from "@/service/baseService";
import { IObject } from "@/types/interface";
import { ElMessage } from "element-plus";
const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);

const dataForm = (): IObject => {
  return {
    id: "",
    courseId: "",
    courseName: "",
    classTime: "",
    oneDay: "",
    oneDayStu: [],
    twoDay: "",
    twoDayStu: [],
    threeDay: "",
    threeDayStu: [],
    fourDay: "",
    fourDayStu: [],
    fiveDay: "",
    fiveDayStu: [],
    sixDay: "",
    sixDayStu: [],
    sevenDay: "",
    sevenDayStu: []
  };
};

// 课程列表
const courseNameList = ref<IObject[]>([]);
// 教职工列表
const teacherList = ref<IObject[]>([]);
// 学生列表
const studentList = ref<IObject[]>([]);
// 课表列表
const curriculumList = ref<IObject[]>([]);

const init = async (id?: number) => {
  visible.value = true;
  curriculumList.value = [dataForm()];
  await getCourseNameList();
  await getTeacherList();

  if (id) {
    await getInfo(id);
  }
};

// 获取课程列表
const getCourseNameList = async () => {
  await baseService
    .get(`/lingyao/courseinfo/page`, {
      page: 1,
      limit: 10000
    })
    .then((res) => {
      courseNameList.value = res.data.list;
    });
};

// 获取教职工列表
const getTeacherList = async () => {
  await baseService
    .get(`/lingyao/teacherEmp/page`, {
      page: 1,
      limit: 10000,
      roleId: 1
    })
    .then((res) => {
      teacherList.value = res.data.list;
    });
};

// 获取学生列表
const getStudentList = async (courseId: any) => {
  if (courseId) {
    await baseService
      .get(`/lingyao/coursetableday/getBuyCourseStudentList`, {
        courseId: courseId
      })
      .then((res) => {
        studentList.value = res.data;
      });
  } else {
    studentList.value = [];
  }
};

// 获取信息
const getInfo = async (id: number) => {
  await baseService.get(`/lingyao/coursetableday/${id}`).then(async (res) => {
    await getStudentList(res.data.courseId);
    res.data.oneDayStu = res.data.oneDayStu ? res.data.oneDayStu.split(",") : [];
    res.data.twoDayStu = res.data.twoDayStu ? res.data.twoDayStu.split(",") : [];
    res.data.threeDayStu = res.data.threeDayStu ? res.data.threeDayStu.split(",") : [];
    res.data.fourDayStu = res.data.fourDayStu ? res.data.fourDayStu.split(",") : [];
    res.data.fiveDayStu = res.data.fiveDayStu ? res.data.fiveDayStu.split(",") : [];
    res.data.sixDayStu = res.data.sixDayStu ? res.data.sixDayStu.split(",") : [];
    res.data.sevenDayStu = res.data.sevenDayStu ? res.data.sevenDayStu.split(",") : [];
    curriculumList.value.forEach((obj) => {
      Object.keys(obj).forEach((key) => {
        if (res.data[key] !== undefined) {
          obj[key] = res.data[key];
        }
      });
    });
  });
};

// 监听课程名称
const changeCourse = async (val: any, item: IObject) => {
  let len = courseNameList.value.filter((e) => e.id == val);
  item.courseId = val ? val : "";
  item.courseName = len.length > 0 ? len[0].courseName : "";
  await getStudentList(val);
  item.oneDayStu = [];
  item.twoDayStu = [];
  item.threeDayStu = [];
  item.fourDayStu = [];
  item.fiveDayStu = [];
  item.sixDayStu = [];
  item.sevenDayStu = [];
};

// 新增
const clickAdd = (item: IObject, index: number) => {
  curriculumList.value.splice(index + 1, 0, dataForm());
};

// 删除
const clickDel = (item: IObject, index: number) => {
  curriculumList.value.splice(index, 1);
};

// 表单提交
const dataFormSubmitHandle = () => {
  let courseIdList = curriculumList.value.filter((item) => item.courseId == "");
  let classTimeList = curriculumList.value.filter((item) => item.classTime == "");
  if (courseIdList.length > 0) {
    return ElMessage.error("请选择课程名称");
  }

  if (classTimeList.length > 0) {
    return ElMessage.error("请选择上课时间");
  }

  let id = curriculumList.value[0].id;
  let list = JSON.parse(JSON.stringify(curriculumList.value));
  list.forEach((item: any) => {
    item.oneDayStu = item.oneDayStu ? item.oneDayStu.join(",") : "";
    item.twoDayStu = item.twoDayStu ? item.twoDayStu.join(",") : "";
    item.threeDayStu = item.threeDayStu ? item.threeDayStu.join(",") : "";
    item.fourDayStu = item.fourDayStu ? item.fourDayStu.join(",") : "";
    item.fiveDayStu = item.fiveDayStu ? item.fiveDayStu.join(",") : "";
    item.sixDayStu = item.sixDayStu ? item.sixDayStu.join(",") : "";
    item.sevenDayStu = item.sevenDayStu ? item.sevenDayStu.join(",") : "";
  });

  (!id ? baseService.post : baseService.put)("/lingyao/coursetableday", list).then((res) => {
    ElMessage.success({
      message: "成功",
      duration: 500,
      onClose: () => {
        visible.value = false;
        emit("refreshDataList");
      }
    });
  });
};

defineExpose({
  init
});
</script>

<style lang="less" scoped>
.curriculum-box {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;

  .urriculum-item {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.7fr 0.3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.5fr;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    margin-bottom: 10px;

    &.urriculum-item-header {
      font-weight: bold;
      margin-bottom: 10px;
    }

    .chunk-box:nth-child(3) {
      span {
        height: 38px;
        line-height: 38px;
      }
    }

    .chunk-box {
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;

      .el-select:first-child {
        margin-bottom: 6px;
      }

      .operat-icon {
        width: 25px;
        height: 25px;
        background: rgba(192, 196, 204, 0.3);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px 5px;
        cursor: pointer;
      }

      &.operat-box {
        flex-direction: row;
      }
    }
  }
}
</style>
